<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.controller.model.UserFormMessages"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/metaheader.jsp" %>
	
	<!--  Ajax-Includes -->
	<script type='text/javascript' src='./dwr/interface/DWRUserManager.js'></script>
	<script type='text/javascript' src='./dwr/engine.js'></script>
	<script type='text/javascript' src='./dwr/util.js'> </script>
<script type='text/javascript'>
//Registration:
function register() {
  dwr.util.getValues(person);
  DWRUserManager.registerUser(person, registrationFinished);
}

function registrationFinished(resultMessages){
	messages = resultMessages;
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h3>Registration Successful</h3>" 
			+ "<p>Your GroupMe! account has been created successfully. You can now login and start to build new groups, browse existing groups, ...</p>"
			+ "<p>Account Details:</p>" 
			+ "<table>"
				+ "<tr><td><strong>first name:</strong></td><td>" + person.firstName + "</td></tr>"
				+ "<tr><td><strong>last name:</strong></td><td>" + person.lastName + "</td></tr>"
				+ "<tr><td><strong>email:</strong></td><td>" + person.email + "</td></tr>"
				+ "<tr><td><strong>foaf document:</strong></td><td>" + person.foafDocumentURL + "</td></tr>"
				+ "<tr><td><strong>username:</strong></td><td>" + person.username + "</td></tr>"
			+ "</table>"
			+ "<h3>Login</h3>"
			+ "<form name='login' action='<%= VIEW_VOCABULARY.GROUPME_BASE_URL + VIEW_VOCABULARY.ACTION_LOGIN %>' method='post'> "
				+ "<table>"
				+ "<tr><td>username: </td><td><input type='text' name='<%= VIEW_VOCABULARY.PARAMETER_USERNAME %>' value='"  + person.username + "'/></td></tr>" 		
				+ "<tr><td>password: </td><td><input type='password' name='<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>'/></td></tr>"
				+ "<tr><td colspan='2'><input type='submit' value='login'/></td></tr></table>";
	}
}

// change password:
function changeUserPassword(){
	dwr.util.getValues(person);
	DWRUserManager.updatePassword(person, changeUserPasswordFinished);	
}

function changeUserPasswordFinished(resultMessages){
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h3>Password changed successfully</h3>" 
			+ "<p>You can now continue to build new groups, browse existing groups, ...</p>"
			+ "<p><a href='<%= VIEW_VOCABULARY.ACTION_HOME %>' title='GroupMe! Home'>Back to <i>home</i>...</a></p>";
	}	
}

//change user details:
function updatePersonalUserData(){
	dwr.util.getValues(person);
	DWRUserManager.updateUserDetails(person, updatePersonalUserDEataFinished);
}

function updatePersonalUserDEataFinished(resultMessages){
	if(!resultMessages.registrationSuccessFul){
		dwr.util.setValues(resultMessages);
	}else{
		var wholeRegistrationForm = document.getElementById("accountCreationForm");
		wholeRegistrationForm.innerHTML="<h3>Modifications accepted</h3>" 
			+ "<p>Your GroupMe! account has been modified successfully. You can now continue to build or browse groups!</p>"
			+ "<p>Actual Account Details:</p>" 
			+ "<table>"
				+ "<tr><td><strong>first name:</strong></td><td>" + person.firstName + "</td></tr>"
				+ "<tr><td><strong>last name:</strong></td><td>" + person.lastName + "</td></tr>"
				+ "<tr><td><strong>email:</strong></td><td>" + person.email + "</td></tr>"
				+ "<tr><td><strong>foaf document:</strong></td><td>" + person.foafDocumentURL + "</td></tr>"
				+ "<tr><td><strong>photo:</strong></td><td>" + person.photo + "</td></tr>"
			+ "</table>"
			+ "<p><a href='<%= VIEW_VOCABULARY.ACTION_HOME %>' title='GroupMe! Home'>Back to <i>home</i>...</a></p>";
	}
}

//init stuff:
function initUser() {
  DWRUserManager.getUserFormObject(setUser);
}
function initMessages() {
  DWRUserManager.getUserFormObject(setMessages);
}
var person;
var messages;
function setUser(aperson) {
  person = aperson;
  dwr.util.setValues(aperson);
}
function setMessages(emptyMessages) {
  messages = emptyMessages;
}

function init() {
  DWRUtil.useLoadingMessage();
  initUser();
  initMessages();
}

</script>
	<title>
		GroupMe! - The Social Semantic Web 
		<c:choose>
			<c:when test="${userManager.loggedIn}">
				[Account Management]	 			
	 		</c:when>
			<c:otherwise>
				[Registration]
			</c:otherwise>
		</c:choose>
	</title>
</head>
<body onload="init()">
	<!-- title image, logo:  -->
	<div id="header">
		<%@ include file="/jsp-includes/titleheader.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<div id="main">

		<!-- Sidebar -->
		<div id="sidebar">
		</div>


		<!-- Content: -->
		<div id="content">
		<c:choose>
			<c:when test="${userManager.loggedIn}">
				<h1>Manage GroupMe! Account</h1>
	 		</c:when>
			<c:otherwise>
				<h1>Create GroupMe! Account</h1>
			</c:otherwise>
		</c:choose>
		<c:if test="${userManager.loggedIn}">
		<div id="personal-menu">
					 <a href="<%=VIEW_VOCABULARY.RESTful_USER_URI_PATTERN + userManager.getUser().getUserName() %>" title="Your profile page...">you</a>
					| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_MYGROUPS %>" title="Groups you created...">your groups</a>
					| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_SUBSCRIPTIONS %>" title="Groups you subscribed to...">your subscriptions</a>
					| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_DASHBOARD %>" title="View what happened with your stuff...">your dashboard</a>
					| <a href="./<%=VIEW_VOCABULARY.ACTION_HOME%>?<%=VIEW_VOCABULARY.PARAMETER_MYHOME_VIEW %>=<%=VIEW_VOCABULARY.VIEW_CREATE_NEW_GROUP %>" title="Create a new group...">create a new group</a>
					| <a href="<%= VIEW_VOCABULARY.ACTION_MODIFY_ACCOUNT %>" title="Modify your GroupMe! account...">account settings</a> 
				</div>
		</c:if>
			<div id="accountCreationForm">
			<p id="<%= UserFormMessages.OVERALL_MESSAGE  %>"></p>
			<h3>Enter Account Details</h3>
			<p><strong>1. Personal Information:</strong></p>
    		<table>
				<tr>
           			<td>first name:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_FIRST_NAME %>"/> </td>
           			<td><span class="error" id="<%= UserFormMessages.FIRSTNAME_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>last name:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_LAST_NAME %>"/> </td>
           			<td><span class="error" id="<%= UserFormMessages.LASTNAME_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>email:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_EMAIL %>" /> </td>
           			<td><span class="error" id="<%= UserFormMessages.EMAIL_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>foaf:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_FOAF %>" /> </td>
           			<td><span class="error" id="<%= UserFormMessages.FOAF_MESSAGE %>">
           				<span style="color: gray;"> optional: If you have a <a href="http://foaf-project.org" title="Friend-Of-A-Friend">FOAF</a> description then enter its URL here.</span> 
           			</span></td>
        		</tr>
        		<tr>
           			<td>photo:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_PHOTO %>" /> </td>
           			<td><span class="error" id="<%= UserFormMessages.PHOTO_MESSAGE %>">
           				<span style="color: gray;"> optional: If you want to equip your GroupMe! account with a photo of you then enter its URL here.</span>
           			</span></td>
        		</tr>
        	<c:if test="${userManager.loggedIn}">
        		<tr>
           			<td></td>
           			<td>
               			<input type="submit" value="back" onclick="javascript:location.href='<%= VIEW_VOCABULARY.ACTION_HOME %>'" />
               			<input type="submit" value="update" onclick="updatePersonalUserData()" />
           			</td>
           			<td></td>
        		</tr>
        	</c:if>
        	</table>
	<c:choose>
		<c:when test="${!userManager.loggedIn}">
			<p><strong>2. Username and Password:</strong></p>        		
			<table>
        		<tr>
           			<td>username:</td>
           			<td><input type="text" id="<%= VIEW_VOCABULARY.PARAMETER_USERNAME %>"/> </td>
           			<td><span class="error" id="<%= UserFormMessages.USERNAME_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>password:</td>
           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>" /> </td>
           			<td><span class="error" id="<%= UserFormMessages.PASSWORD_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>validate password:</td>
           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_RE_TYPED_PASSWORD %>" /> </td>
           			<td/>
        		</tr>
        		<tr>
           			<td></td>
           			<td>
               			<input type="submit" value="register" onclick="register()" />
           			</td>
           			<td></td>
        		</tr>
    		</table>
   		</c:when>
   		
		<c:otherwise>
    		<p><strong>2. Change Password:</strong></p>        		
			<table>
        		<tr>
           			<td>password:</td>
           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_PASSWORD %>" /> </td>
           			<td><span class="error" id="<%= UserFormMessages.PASSWORD_MESSAGE %>"></span></td>
        		</tr>
        		<tr>
           			<td>validate password:</td>
           			<td><input type="password" id="<%= VIEW_VOCABULARY.PARAMETER_RE_TYPED_PASSWORD %>" /> </td>
           			<td/>
        		</tr>
        		<tr>
        			<td></td>
           			<td>
           				<input type="submit" value="back" onclick="javascript:location.href='<%= VIEW_VOCABULARY.ACTION_HOME %>'" />
               			<input type="submit" value="change password" onclick="changeUserPassword()" />
           			</td>
           			<td></td>
        		</tr>
    		</table>
		</c:otherwise>
	</c:choose>
    		
			</div>
		</div>
	</div>
	
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>